<template >

     <el-container >

          <el-main>

                <div class="m-choose">
                      <div class="block">

                            <div class="ten">
                                  <span class="demonstration">发布时间</span>
                                  <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
                            </div>
                            <span class="span">一</span>
                            <div class="ten">
                                  <span class="demonstration"></span>
                                  <el-date-picker v-model="value1"  type="date" placeholder="选择日期"></el-date-picker>
                            </div>





                            <div class="ten">
                                  <span class="demonstration">选择类型</span>
                                  <el-select v-model="value" placeholder="请选择"  @change="changePriceValue"     class="box4"  value="">
                                       <el-option v-for="item in options"  :key="item.value" :label="item.label" :value="item.value">

                                       </el-option>
                                  </el-select>
                            </div>

                     </div>

                           <div  style="margin-top: 20px">
                                <div class="kai" >
                                      <span class="now">选择状态</span>
                                            <el-select v-model="type" placeholder="请选择" class="box5"  value="">
                                                   <el-option v-for="item in row" :key="item.value" :label="item.label" :value="item.value">

                                                    </el-option>
                                            </el-select>

                                 </div>

                             </div>




                       <div class="button">
                            <span>
                                  <el-button type="danger">清空</el-button>
                                  <el-button type="success"  @click="search" >搜索</el-button>
                             </span>

                        </div>

                 </div>



                <div  id="app"    class="main-t">
                        <div style="font-weight: bold">Article列表</div>
                        <router-link to='/New' ><el-button type="success" class="new-b" >+新增</el-button></router-link>

                 </div>

            <!--    .slice((currentPage-1)*PageSize,currentPage*PageSize)-->
         <el-table :data="tableData .slice((currentPage-1)*PageSize,currentPage*PageSize)"
                      style="width: 100%"
                     v-loading="loading"

                      >

                       <el-table-column prop="id" label="ID"   sortable width="120">
                       </el-table-column>

                       <el-table-column prop="title" label="名称"   sortable width="120">
                       </el-table-column>

                       <el-table-column prop="type" label="类型"  :formatter="genre" sortable width="140">
                       </el-table-column>

                       <el-table-column prop="updateAt" label="发布日期"    :formatter="dateFormat"  sortable width="140">
                       </el-table-column>

                       <el-table-column prop="updateBy" label="结束日期"    sortable width="140">
                       </el-table-column>

                       <el-table-column prop="author" label="发布者"   sortable width="120">
                       </el-table-column>

                       <el-table-column prop="status" label="状态"  :formatter="state"  sortable width="120">
                       </el-table-column>


                       <el-table-column label="操作">

                             <template slot-scope="scope">
                                    <el-button
                                      style="margin-left: 10px;"
                                      size="mini"
                                      type="primary"
                                      click="handleAdd(scope.$index, scope.row)" >上线</el-button>
                                    <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
                                    <el-button size="mini" type="danger" @click="delUser(scope.row)">删除</el-button>
                              </template>
                        </el-table-column>


                 </el-table>


                <div class="paging">

                      <el-pagination background layout="total, sizes, prev, pager, next, jumper,slot"
                                     @size-change="handleSizeChange"
                                     @current-change="handleCurrentChange"
                                     :current-page.sync="currentPage"
                                     :page-sizes="pageSizes"
                                     :page-size="PageSize"
                                     :total="totalCount"


                      >

                             <el-button type="primary" plain style="margin-left: 10px">确定</el-button>
                      </el-pagination>

                 </div>

           </el-main>

      </el-container>


</template>








<script>

  import List from '../js/List'
  export default List

  import "../style/sass/List.css"
</script>


